Ext.namespace('App.ux');

// Main (Tabbed) Panel
var tabPanel = new Ext.TabPanel({
        region:'center',
        split: true,
        enableTabScroll:true,
        activeTab : 0
});
/**
 * Tree Panel Init
 */
var treePanel = new Ext.tree.TreePanel({
    id: 'treePanle',
    region: 'west',
    collapsible: true,
    split: true,
    title: 'Data Center',
    width: 250,
    autoScroll: true,

    dataUrl: 'tree',
    root: {
        nodeType: 'async',
        text: 'localhost',
        iconCls: 'databaseFolder',
        id: 'root_localhost'
    },
    rootVisible: true,
    /**
     * Context menu for tree panel
     * with 2 elements: edit and cansel element.
     * The First for edit table data
     */
    contextMenu: new Ext.menu.Menu({
        items: [{
            id: 'edit-node',
            text: 'Edit Table Data'
        }, {
            id: 'cansel',
            text: 'Cancel'
        }],
        listeners: {
            /**
            * Event fires when context menu is cliked
            * item: context clicked item
            */
            itemclick: function(item) {
                switch (item.id) {
                    // If selected 'edit data' in new tab opens grid with data from selected table
                    case 'edit-node':
                        n = item.parentMenu.contextNode; //get clicked tree node
                        /**
                     * If cliked node is opened, then this tab set as active
                     * Else table grid opened in new tab
                     */
                        if (!Ext.getCmp(n.text)) {
                            var grid = new App.ux.DynamicGridPanel({
                                id: n.text,
                                title: n.text,
                                closable: true,

                                // POST Params
                                databaseName: n.parentNode.text,
                                tableName: n.text
                            });
                            var newTab = tabPanel.add(grid); // Add grid at new tab on tab panel
                            tabPanel.doLayout();
                            tabPanel.setActiveTab(newTab); // Set it active
                        } else {
                            tabPanel.setActiveTab(Ext.getCmp(n.text));
                        }
                        break;
                }
            }
        }
    }),
    listeners: {
        /**
         * Event fires when a TABLE node is right clicked.
         * node: clicked tree node
         */
        contextmenu: function(node, e) {
            /**
            * If clicked on TABLE node then fires event
            */
            if (node.attributes.id.indexOf("table_") != -1) {
                node.select();
                var c = node.getOwnerTree().contextMenu;
                c.contextNode = node;
                c.showAt(e.getXY());
            }
        }
    }
});